<template>
  <div style="background-color: #efefef;margin-bottom: 1.2rem">
    <!--  t头-->
    <div class="biueTopTitle">
      <van-row>
        <van-col span="2">
          <van-icon name="arrow-left" @click="routerBack"/>
        </van-col>
        <van-col span="5" offset="8">
          <div class="biueTopTitle">{{ titleName }}</div>
        </van-col>
      </van-row>
    </div>
    <!--  头end-->
    <!--    搜索框-->
    <div>
      <div class="searchBox">
        <van-row>
          <van-col span="5" :offset="1">
            <van-field
                readonly
                clickable
                :value="value"
                :placeholder="columns[0]"
                @click="showPicker = true"
            />
            <van-popup v-model="showPicker" round position="bottom">
              <van-picker
                  show-toolbar
                  :columns="columns"
                  @cancel="showPicker = false"
                  @confirm="onConfirm"
              />
            </van-popup>
          </van-col>
          <van-col span="13">
            <van-cell-group>
              <van-field v-model="searchValue" placeholder="全部文献搜索"/>
            </van-cell-group>
          </van-col>
          <van-col span="4">
            <div class="searchBtn">
              搜索
            </div>
          </van-col>
        </van-row>
      </div>
    </div>
    <!--    搜索框end-->
    <!--  下拉菜单-->
    <div style="height: 1.16rem; overflow: hidden">
      <van-row >
        <!--      <van-col span="5">-->
        <!--        共{{count}}条-->
        <!--      </van-col>-->
        <van-col span="6" class="countClass">
         共{{count}}条
        </van-col>
        <van-col span="6">
          <van-dropdown-menu>
            <van-dropdown-item v-model="value1" :options="option1" @change="dropdownOne(value1)"/>
          </van-dropdown-menu>
        </van-col>
        <van-col span="8">
          <van-dropdown-menu>
            <van-dropdown-item v-model="value2" :options="option2" @change="dropdownTwo(value2)"/>
          </van-dropdown-menu>
        </van-col>

        <van-col span="4" class="sxBtn" @click="showPopup">筛选
          <van-icon name="filter-o"/>
        </van-col>
      </van-row>
      <van-popup v-model="show" round position="right"
                 closeable
                 close-icon-position="top-right" :style="{ width: '80%' , height: '100%'}">
        <van-tree-select
            style="margin-top: 1rem"
            :items="items"
            :active-id.sync="activeIds"
            :main-active-index.sync="activeIndex"
        />
        <div class="btn">检索</div>
      </van-popup>
    </div>
    <!--  下拉菜单end-->
    <!--  list-->
    <div class="bookList">
      <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
        <van-list
            v-model="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="onLoad"
            offset="50"
        >
          <div class="box" @click="GosynDetails">
            <div v-for="(item , index) in list" :key="index">
              <div class="listtitle">
                {{ item.title }}
              </div>
              <div class="textTop2">
                <van-row>
                  <van-col span="6">{{ item.author }}</van-col>
                  <van-col span="18">{{ item.school }}</van-col>
                </van-row>
              </div>
              <div class="textTop3">
                <van-row>
                  <van-col span="8">{{ item.z }}</van-col>
                  <van-col span="8">{{ item.x }}</van-col>
                  <van-col span="8">{{ item.dataSource }}</van-col>
                </van-row>
              </div>
              <div class="textTop4">
                {{ item.text }}
              </div>
              <div class="textTop5">
                <van-row>
                  <van-col span="8">下载:{{ item.downLoadRate }}</van-col>
                  <van-col span="8">被引:{{ item.browseRate }}</van-col>
                  <van-col span="8">{{ item.pushDate }}</van-col>
                </van-row>
              </div>
              <div class="textTop6">

              </div>
            </div>
          </div>
        </van-list>
      </van-pull-refresh>
    </div>
    <!--  listend-->
  </div>
</template>

<script>
import {advSearchInnovate} from "@/api/synergyApi/moreApi";

export default {
  name: "more",
  data() {
    return {
      page:1,
      asd:2,
      count:0,//默认页数
      loading: false,  //是否底部加载更多处于加载状态   底部加载中
      finished: false, //是否加载完成 加载完成 不在加载    已经底了
      refreshing: false, //是否处于下拉刷新状态  顶部刷新中
      items: [
        {
          // 导航名称
          text: '中央精神',
          // 导航节点额外类名
          className: 'my-class',
          // 该导航下所有的可选项
          children: [
            {
              // 名称
              text: '中央精神',
              // id，作为匹配选中状态的标识符
              id: '中央精神',
              // 禁用选项
              // disabled: true,
            },
          ],
        },
        {
          // 导航名称
          text: '历史演进',
          // 导航节点额外类名
          className: 'my-class',
          // 该导航下所有的可选项
          children: [
            {
              // 名称
              text: '中国古代兵民合一的历史变迁',
              // id，作为匹配选中状态的标识符
              id: '中国古代兵民合一的历史变迁',
              // 禁用选项
              // disabled: true,
            },
            {
              text: '中国特色协同创新式发展历程',
              id: '中国特色协同创新式发展历程',
            },
          ],
        },
        {
          // 导航名称
          text: '国内动态',
          // 导航节点额外类名
          className: 'my-class',
          // 该导航下所有的可选项
          children: [
            {
              // 名称
              text: '政策体系',
              // id，作为匹配选中状态的标识符
              id: '政策体系',
              // 禁用选项
              // disabled: true,
            },
            {
              text: '各地各方动态',
              id: '各地各方动态',
            },
            {
              text: '实践案例',
              id: '实践案例',
            },
            {
              text: '学术研究',
              id: '学术研究',
            },
          ],
        },
        {
          // 导航名称
          text: '绵阳实践',
          // 导航节点额外类名
          className: 'my-class',
          // 该导航下所有的可选项
          children: [
            {
              // 名称
              text: '发展历程',
              // id，作为匹配选中状态的标识符
              id: '发展历程',
              // 禁用选项
              // disabled: true,
            },
            {
              text: '方针政策',
              id: '方针政策',
            },
            {
              text: '两弹一星精神',
              id: '两弹一星精神',
            },
            {
              text: '绵阳经验',
              id: '绵阳经验',
            },
            {
              text: '理论研究',
              id: '理论研究',
            },
          ],
        },
        {
          // 导航名称
          text: '国际视野',
          // 导航节点额外类名
          className: 'my-class',
          // 该导航下所有的可选项
          children: [
            {
              // 名称
              text: '国外实践动态',
              // id，作为匹配选中状态的标识符
              id: '国外实践动态',
              // 禁用选项
              // disabled: true,
            },
            {
              text: '理论研究',
              id: '理论研究',
            },

          ],
        },
      ],
      titleName: '',
      activeIds: [1, 2], //筛选多选二层默认选中值
      activeIndex: 0,  //筛选打开第一层默认值
      show: false, //筛选多层弹出指示
      value: '主题', //下拉默认值
      searchValue: '',//输入值
      showPicker: false, //遮罩层
      columns: ['主题', '题名', '作者 ', '机构', '摘要', '关键词', '刊名'], //下拉值
      value1: 0,  //下拉默认1  音视频
      option1: [
        {text: '文献', value: 0},
        {text: '图片', value: 1},
        {text: '音视频', value: 2},
      ],
      value2: 'datedesc',//下拉默认2 相关性排序
      option2: [
        {text: '发表时间降序', value: 'datedesc'},
        {text: '发表时间升序', value: 'dateasc '},
        {text: '下载量降序', value: 'downdesc'},
        {text: '下载量升序 ', value: 'downasc '},
      ],
      value3: 'desc',//下拉默认3 发表时间排序
      option3: [
        {text: '下载量降序', value: 'desc'},
        {text: '下载量升序 ', value: 'asc '},
      ],
      list: [
        {
          title: '民营企业正逐渐成为军工主力“军转民”成功',
          name: '徐新',
          school: '华东师范大学商学院信息学系',
          z: '图书情报工作',
          x: '2015年13期',
          c: '期刊',
          v: '美国军工产业军民融合发展历经三阶段，实现军民资本与技术的双向渗透和扩散。美国军民产业的发展历程根据军民融合的程度，可用冷战作为分界实现军民资本与技术的双向渗透和扩散',
          b: '841',
          n: '457',
          m: '2022-12-31',
        },
        {
          title: '民营企业正逐渐成为军工主力“军转民”成功',
          name: '徐新',
          school: '华东师范大学商学院信息学系',
          z: '图书情报工作',
          x: '2015年13期',
          c: '期刊',
          v: '美国军工产业军民融合发展历经三阶段，实现军民资本与技术的双向渗透和扩散。美国军民产业的发展历程根据军民融合的程度，可用冷战作为分界实现军民资本与技术的双向渗透和扩散',
          b: '841',
          n: '457',
          m: '2022-12-31',
        },
        {
          title: '民营企业正逐渐成为军工主力“军转民”成功',
          name: '徐新',
          school: '华东师范大学商学院信息学系',
          z: '图书情报工作',
          x: '2015年13期',
          c: '期刊',
          v: '美国军工产业军民融合发展历经三阶段，实现军民资本与技术的双向渗透和扩散。美国军民产业的发展历程根据军民融合的程度，可用冷战作为分界实现军民资本与技术的双向渗透和扩散',
          b: '841',
          n: '457',
          m: '2022-12-31',
        },
        {
          title: '民营企业正逐渐成为军工主力“军转民”成功',
          name: '徐新',
          school: '华东师范大学商学院信息学系',
          z: '图书情报工作',
          x: '2015年13期',
          c: '期刊',
          v: '美国军工产业军民融合发展历经三阶段，实现军民资本与技术的双向渗透和扩散。美国军民产业的发展历程根据军民融合的程度，可用冷战作为分界实现军民资本与技术的双向渗透和扩散',
          b: '841',
          n: '457',
          m: '2022-12-31',
        },
      ],
    }
  },
  created() {
   // console.log(this.$route.query.ids)
    this.titleName = this.$route.query.ids

    let list = {
      orderByType: "发表时间",
      orderByValue: "desc",
      page: 1,
      pageSize: 10,
      searchType: this.value,
      searchValue: this.searchValue,
      sortCodeList: [],
      searchDirection: 0
    }
    advSearchInnovate(list)
        .then(res=>{
         // console.log(res)
          this.count = res.data.data.count  //总条数
          this.list = res.data.data.list
          // this.list.push.apply( this.list,res.data.data.list)  //合并请求数组
        })

  },
  methods: {
    //无限加载函数
    onLoad() {
      setTimeout(() => {
        //下拉刷新 数据清零
        if (this.refreshing) {
          this.list = []
          this.refreshing = false;  //判断如果下拉刷新就请求第一页刷新
          this.page = 1
         // console.log('第一个')
        }
        //判断上滑加载是发行党校 还是相关党校
          let list = {
            orderByType: "发表时间",
            orderByValue: "desc",
            page: this.asd++,
            pageSize: 10,
            searchType: this.value,
            searchValue: this.searchValue,
            sortCodeList: ["ca101"],
            searchDirection: 1
          }
       // console.log(this.page)
        // 加载无限下划请求
        advSearchInnovate(list)
            .then(res=>{
             // console.log(list)
              this.count = res.data.data.count  //总条数
              this.list.push.apply( this.list,res.data.data.list)  //合并请求数组
            })

        //console.log('到底了')
        this.loading = false;
        //总长度和总页数相等 停止请求回调
        if (this.list.length >= this.count) {  //如果总条数
          this.finished = true;
        }
      }, 1000);
    },
    //下拉刷新完成回调函数 数据重新加载
    onRefresh() {
      // 清空列表数据
      this.finished = false;
      //下拉刷新 数据清零
      if (this.refreshing) {
        this.list = []
        this.refreshing = false;  //判断如果下拉刷新就请求第一页刷新
        // console.log('第一个')
      }
    },
    //文字 视频图片
    dropdownOne(vul){
      //console.log(vul)
    },
    dropdownTwo(vul){
      //console.log(vul)
    },
    showPopup() {
      this.show = true;
    },
    //返回按钮
    routerBack() {
      this.$router.go(-1)
    },
    onConfirm(value) {
      this.value = value;
      this.showPicker = false;
    },
    GosynDetails() {
      this.$router.push({path: '/synDetails',})
    },
  }
}
</script>

<style scoped>

.biueTopTitle {
  /*width: 10rem;*/
  height: 1.173rem;
  background-color: #0083bd;
  font-size: 0.453rem;
  font-weight: normal;
  font-stretch: normal;
  letter-spacing: 0rem;
  color: #ffffff;
  line-height: 1.173rem;
  text-align: center;
}

.searchBtn {
  background-color: #0083bd;
  border-radius: 0rem 0.053rem 0.053rem 0rem;
  width: 1.7rem;
  height: 1rem;
  color: white;
  font-family: PingFang-SC-Medium;
  font-size: 0.4rem;
  font-weight: normal;
  font-stretch: normal;
  letter-spacing: 0rem;
  line-height: 1rem;
  text-align: center;
}

.searchBox {
  margin: 0.3rem 0;
}

.sxBtn {
  font-family: PingFang-SC-Medium;
  font-size: 0.347rem;
  font-weight: normal;
  font-stretch: normal;
  letter-spacing: 0rem;
  color: #000000;
  opacity: 0.8;
  height: 1.16rem;
  background-color: #ffffff;
  line-height: 1.16rem;
  text-align: center;
}

.box {
  margin: 0 0.3rem;
}

.listtitle {
  /*width: 9.387rem;*/
  height: 0.467rem;
  font-family: PingFang-SC-Regular;
  font-size: 0.48rem;
  font-weight: normal;
  font-stretch: normal;
  line-height: 0.467rem;
  letter-spacing: 0rem;
  color: #000000;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  margin-top: 0.6rem;
}

.textTop2 {
  height: 0.373rem;
  font-family: PingFang-SC-Regular;
  font-size: 0.4rem;
  font-weight: normal;
  font-stretch: normal;
  letter-spacing: 0rem;
  color: #848588;
  margin-top: 0.36rem;
}

.textTop3 {
  height: 0.333rem;
  font-family: PingFang-SC-Regular;
  font-size: 0.347rem;
  font-weight: normal;
  font-stretch: normal;
  letter-spacing: 0rem;
  color: #9f9f9f;
  margin-top: 0.35rem;
}

.textTop4 {
  width: 100%;
  height: 2rem;
  font-family: PingFang-SC-Regular;
  font-size: 0.427rem;
  font-weight: normal;
  font-stretch: normal;
  letter-spacing: 0rem;
  color: #505050;
  opacity: 0.6;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  margin-top: 0.5rem;
}

.textTop5 {
  height: 0.347rem;
  font-family: PingFang-SC-Regular;
  font-size: 0.373rem;
  font-weight: normal;
  font-stretch: normal;
  letter-spacing: 0rem;
  color: #000000;
  opacity: 0.48;
  margin-top: 0.38rem;
}

.textTop6 {
  border: 1px solid #d2d2d2;
  margin-top: 0.5rem;
}

.btn {
  width: 2rem;
  height: 1rem;
  line-height: 1rem;
  text-align: center;
  background-color: #0083bd;
  color: white;
  font-weight: bolder;
  font-size: 0.4rem;
  margin-left: 39%;
  margin-top: 80%;
}
.countClass{
  color: #000000;
  opacity: 0.8;
  height: 1.16rem;
  background-color: #ffffff;
  line-height: 1.16rem;
  text-align: center;
}
/deep/.van-dropdown-menu__bar{
  box-shadow:0 2px 12px rgb(255, 255, 255);
}
</style>